<template>
  <div class="navbar-top">
    <div class="container-box">
      <div class="navbar-title">海量模板免费使用，印刷订单全国包邮</div>
      <div class="navbar-user">
        <button class="login-btn primary-border" v-if="!userInfo.UserName"  @click="$store.commit('login/toggleShow', true)">登录/注册</button>
        <div class="loginout-btn" v-else>
          <nuxt-link to="/personal/acountcenter">
            <span class="label-item-name primary-text">嗨，{{userInfo.NiceName || userInfo.UserName}}</span>
          </nuxt-link>
          <i class="label-line"></i>
          <nuxt-link to="/personal">
            <span class="item primary-text-hover">会员中心</span>
          </nuxt-link>
          <i class="label-line"></i>
          <span class="item primary-text-hover" @click="handleToDesigner">设计师入口</span>
          <i class="label-line"></i>
          <nuxt-link to="/admin" v-if="userInfo.UserType == 'AA'">
            <span class="item primary-text-hover">管理员入口</span>
          </nuxt-link>
          <i v-if="userInfo.UserType == 'AA'" class="label-line"></i>
          <span class="item primary-text-hover" @click="loginOut">注销</span>
        </div>
      </div>
    </div>
    <!-- 设计师申请弹框 -->
    <el-dialog
      append-to-body
      custom-class="design-box"
      :visible.sync="dialogApply"
      top="7vh"
      width="630px"
    >
      <ApplyDesigner :state="state"></ApplyDesigner>
      <div class="close-btn" style="right: -55px;top: 8px;" @click="dialogApply = false"></div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import ApplyDesigner from "@/components/ApplyDesigner";
export default {
  name: "navbar-top",
  components: {
    ApplyDesigner
  },
  computed: {
    ...mapState(["userInfo"])
  },
  data() {
    return {
      dialogApply: false, // 设计师申请弹框
      state: ""
    };
  },
  methods: {
    handleToDesigner() {
      if (this.$store.state.login.isLogin) {
        // 是设计师,直接进入设计师页面
        if (this.userInfo.IsDesigner == 1) {
          this.$router.push("/designercenter");
        } else {
          // 请求申请到哪一步
          this.$axios.get("/ApplyDesigner").then(({ data }) => {
            // console.log(data);
            if (data.code == "0") {
              this.state = data.state;
            } else if (data.code == "-1") {
              this.$message.warning(data.msg);
            }
            this.dialogApply = true;
          });
        }
      } else {
        this.$store.commit("login/toggleShow", true);
      }
    },

    // 注销登录
    loginOut() {
      this.$cookies.remove("token");
      history.go(0);
    }
  }
};
</script>

<style lang="less">
.navbar-top {
  height: 40px;
  background: rgba(243, 243, 243, 1);
  position: relative;
  .container-box {
    height: 40px;
  }
  .navbar-title {font-size: 14px;}
  .navbar-user {
    height: 100%;
    display: flex;
    align-items: center;
    .login-btn {
      width: 99px;
      height: 24px;
      line-height: 20px;
      text-align: center;
      font-size: 12px;
      border: 2px solid transparent;
      border-radius: 12px;
      &:hover {
        background-color: rgba(0, 0, 0, .1);
      }
    }
  }
  .item {
    height: 11px;
    line-height: 11px;
    font-size: 12px;
    color: rgba(153, 153, 153, 1);
    cursor: pointer;
    margin-top: 7px;
    margin-left: 24px;
  }
  .loginout-btn {
    display: flex;
    height: 100%;
    justify-content: space-around;
    align-items: center;
    .label-item-name {
      font-size: 12px;
      cursor: pointer;
    }
    a {
      font-size: 12px;
    }
    span {
      margin: 0;
    }
    .label-line {
      display: inline-block;
      width: 1px;
      height: 17px;
      background: rgba(153, 153, 153, 1);
      margin: 0 15px;
    }
  }
}


.design-box {
  background-color: transparent;
  .el-dialog__header,
  .el-dialog__body {
    padding: 0;
  }
  .el-dialog__header {
    display: none;
  }
}
</style>
